<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>周最佳食谱</title>
		<link rel="stylesheet" href="css/best_recipe.css" />
		<link rel="stylesheet" href="css/view_recipes.css" />
		<link rel="stylesheet" href="css/idangerous.swiper.css" />
		<link rel="stylesheet" href="css/paging.css" />
		<style>
			.swiper-slide {
				position: relative;
				text-align: center;
				font-size: 18px;
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.swiper-slide .banner {
				width: 100%;
				height: 195px;
			}
			
			.device {
				position: relative;
			}
			
			.swiper-container {
				height: 300px;
			}
			
			.device .arrow-left {
				position: absolute;
				left: 10px;
				bottom: 12px;
				margin-top: -15px;
				z-index: 10;
				text-decoration: none;
				color: #FFFFFF;
				font-weight: bolder;
				font-size: 20px;
			}
			
			.device .arrow-right {
				position: absolute;
				right: 10px;
				bottom: 13px;
				z-index: 10;
				text-decoration: none;
				color: #FFFFFF;
				font-weight: bolder;
				font-size: 20px;
			}
			
			.pagination {
				position: absolute;
				right: 10px;
				text-align: right;
				top: 43px;
				width: 100%;
			}
			
			.swiper-pagination-switch {
				display: inline-block;
				width: 5px;
				height: 5px;
				border-radius: 5px;
				background: #FFFFFF;
				margin: 0 2px;
				cursor: pointer;
			}
			
			.swiper-active-switch {
				background: #009A3D;
			}
		</style>
	</head>

	<body style="overflow-x: hidden;background: #eaeae8;">
		<!--<div class="top"></div>-->
		<div class="img" style="position: relative;overflow-x: hidden;">
			<!-- Swiper -->
			<div class="swiper-container1">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="header" style="position: absolute;top: 0;left: 0;background: #009A3D;width: 100%;">
							<span class="title">周最佳食谱</span>
						</div>
						<a href="#">
							<img src="images/best_recipe/rec_image1.png" class="banner" style="margin-top: 40px;" />
						</a>
						<div class="rec_into">
							<div class="into_inner">
								<span class="cai_name">大蒜炒鱿鱼</span>
								<div class="star_group">
									<span class="star"></span>
									<span class="star"></span>
									<span class="star"></span>
								</div>
								<div class="author">

								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="header" style="position: absolute;top: 0;left: 0;background: #009A3D;width: 100%;">
							<span class="title">每周更新食谱</span>
						</div>
						<a href="#">
							<img src="images/best_recipe/rec_image1.png" class="banner" style="margin-top: 40px;" />
						</a>
						<div class="rec_into">
							<div class="into_inner">
								<span class="cai_name">大蒜炒鱿鱼</span>
								<div class="star_group">
									<span class="star"></span>
									<span class="star"></span>
									<span class="star"></span>
								</div>
								<div class="author">

								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="pagination"></div>
				<div class="search"></div>
				<!-- Add Arrows -->
			</div>
		</div>
		<div class="recipe" style="padding: 10px 0;">
			<div class="mode_group">
				<ul class="mode">
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/meat@2x.png" />
							<span class="mode_name">肉类</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/fish@2x.png" />
							<span class="mode_name">河鲜海鲜</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/vegetables@2x.png" />
							<span class="mode_name">蔬菜</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/rice@2x.png" />
							<span class="mode_name">主食</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/soup@2x.png" />
							<span class="mode_name">汤品</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/juice@2x.png" />
							<span class="mode_name">饮品</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/sauce@2x.png" />
							<span class="mode_name">酱料</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/mores@2x.png" />
							<span class="mode_name">一锅三菜</span>
						</a>
					</li>
					<div class="blank"></div>
				</ul>
				<ul class="mode">
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/bread@2x.png" />
							<span class="mode_name">面包</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/dessert@2x.png" />
							<span class="mode_name">甜品</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/sum@2x.png" />
							<span class="mode_name">中式点心</span>
						</a>
					</li>
					<li class="mode_item">
						<a href="javascript:void(0)">
							<img src="images/modes/others@2x.png" />
							<span class="mode_name">其他</span>
						</a>
					</li>
					<div class="blank"></div>
				</ul>
			</div>
			<div class="classify">
				<div class="tab_item" style="padding:5px 15px 0 15px;margin-top: -10px;">
					<div class="device">
						<dl class="page_item page_active">
							<dd class="tab_li">
								<div class="li_inner">
									<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
									<span class="food_name">蘑菇浓汤</span>
									<span class="author_name">张某某</span>
									<span class="see">查看食谱</span>
								</div>
							</dd>
							<dd class="tab_li">
								<div class="li_inner">
									<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
									<span class="food_name">蘑菇浓汤</span>
									<span class="author_name">张某某</span>
									<span class="see">查看食谱</span>
								</div>
							</dd>
							<dd class="tab_li">
								<div class="li_inner">
									<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
									<span class="food_name">蘑菇浓汤</span>
									<span class="author_name">张某某</span>
									<span class="see">查看食谱</span>
								</div>
							</dd>
							<dd class="tab_li">
								<div class="li_inner">
									<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
									<div class="rumb">
										<span class="food_name">蘑菇浓汤</span>
										<span class="author_name">张某某</span>
										<span class="see">查看食谱</span>
									</div>
									<span class="food_name">蘑菇浓汤</span>
									<span class="author_name">张某某</span>
									<span class="see">查看食谱</span>
								</div>
							</dd>
							<dd class="tab_li">
								<div class="li_inner">
									<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
									<span class="food_name">蘑菇浓汤</span>
									<span class="author_name">张某某</span>
									<span class="see">查看食谱</span>
								</div>
							</dd>
							<dd class="tab_li">
								<div class="li_inner">
									<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
									<span class="food_name">蘑菇浓汤</span>
									<span class="author_name">张某某</span>
									<span class="see">查看食谱</span>
								</div>
							</dd>
							<div class="blank"></div>
						</dl>
						<dl class="page_item"></dl>
						<dl class="page_item"></dl>
					</div>
					<div class="page_bottom">
						<div class="back_recip">
							<img src="images/new/m_back@2x.png" style="width: 25px;" />
						</div>
						<div id="pageToolbar"></div>
					</div>
				</div>
			</div>
			<div style="height: 1px;"></div>
			<div class="footer_help"></div>
			<footer>
				<div class="footer_container">
					<div class="footer_item">
						<div class="item_inner">
							<a href="jacascript:void(0)">
								<span class="home_icon"></span>
								<span class="footer_name">主页</span>
							</a>
						</div>
					</div>
					<div class="footer_item">
						<div class="item_inner2">
							<a href="javascript:void(0)">
								<span class="add_icon"></span>
							</a>
						</div>
					</div>
					<div class="footer_item">
						<div class="item_inner3">
							<a href="jacascript:void(0)">
								<span class="mine_icon"></span>
								<span class="footer_name">我的食谱</span>
							</a>
						</div>
					</div>
					<div class="blank"></div>
				</div>
			</footer>
			<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
			<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
			<script type="text/javascript" src="js/bodySize.js"></script>
			<script type="text/javascript" src="js/query.js"></script>
			<script type="text/javascript" src="js/paging.js"></script>
			<script>
				var mySwiper
				$(function() {
					getPage();
					initSwiper();
				})

				function getPage() {
					var page = $(".page_item").length;
					$('#pageToolbar').Paging({
						pagesize: 1,
						count: page,
						toolbar: true,
						callback: function(page, size, count) {
							$('.page_item:nth-of-type(' + page + ')').addClass('page_active').siblings().removeClass('page_active');
						}
					});
				}

				function initSwiper() {
					mySwiper = new Swiper('.swiper-container', {
						grabCursor: true,
						paginationClickable: true
					})
				}

				document.getElementsByClassName('tab_item')[0].addEventListener('touchmove', function() {

				})
				var mySwiper1 = new Swiper('.swiper-container1', {
						pagination: '.pagination',
						grabCursor: true,
						loop: true,
						paginationClickable: true,
						autoplayDisableOnInteraction: false,
						//autoplay: 2000,
					})
					/*显示分类*/
				$('.back_recip').click(function() {
					$('.mode_group').show();
					$('.tab_item').removeClass('tab_active');
				})
				$('.mode_item').click(function() {
					$('.mode_group').hide();
					$('.tab_item').addClass('tab_active');
				})
			</script>
	</body>

</html>